<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>分类管理</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>

<div style="padding:10px 20px;">
	<form class="layui-form" action="" id="searchForm">
		<div style="display: flex;align-items: center;justify-content: flex-start;">
			<span class="">分类名称</span>
			<input type="text" name="title" id="title"  autocomplete="off" class="layui-input" style="width: 200px;">
			<a  onclick="doSearch()" class="layui-btn layui-btn-radius" >搜索</a>
			<button type="reset" class="layui-btn  layui-btn-radius ">重置</button>
		</div>
	</form>
	<div class="c-red">点击表格中的排序数字直接修改，数字大的排前面（分类排序也会生效于购物车，修改后购物车要清空重新加入，才能生效）</div>
</div>

<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
<!--		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--		<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--		<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新数据</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</a>
<!--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
	{{#  if(d.visibility==1){ }}

	{{#  } else { }}

	{{#  } }}
</script>
<script type="text/html" id="picture">
	{{pictureShow(d.cover)}}
</script>

<script type="text/html" id="visibility">
	{{#  if(d.visibility==1){ }}
		<span class="c-blue">是</span>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="toggleShow">设为隐藏</a>
	{{#  } else { }}
		<span class="c-999">否</span>
	<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="toggleShow">设为显示</a>
	{{#  } }}
</script>

<script th:replace="admin/template/picbox.html"></script>
<script>


	let $ ,layer,table;
	layui.use(['table','form'], function(){
		table=layui.table;
		const form = layui.form;
		$=layui.jquery;
		layer=layui.layer;

		table.render({
			elem: '#dataTable'
			,url:'/category/list'
			,toolbar: '#toolbarDemo'
			,title: '用户数据表'
			,totalRow: true
			,cols: [
				[
					// {type: 'checkbox', fixed: 'left'}
					{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, }
                    ,{field:'sort', title:'排序', edit: 'text',width:80}
					,{field:'title', title:'分类名称'}
					,{field:'goodsCount', title:'商品数量'}
					,{field:'cover', title:'封面'}
                    ,{field:'cover', title:'预览',templet:"#picture"}
                    ,{field:'visibility', title:'前台显示',width:120,templet:"#visibility"}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
				]
			]
			,page: true
			,limit: 10
			,limits: [10,50,80]
			,id:'dataTable',
            done:function(){
                console.log('表格渲染完成');
                lightbox();//绑定相册插件
            }
		});

        //监听单元格编辑
        table.on('edit(dataTable)', function(obj){
            var value = obj.value.trim() //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            console.log('是否NAN',isNaN(value))
            if( isNaN(value) || !value ) {
                layer.msg("非法输入")
                table.reload('dataTable')
            } else {
                $.ajax({
                    type:"POST",
                    url:'/category/sort',
                    // dataType:'',
                    data:{id:data.id,sort:value},
                }).done(function(res){
                    if(res.code==0){
                        console.log('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ value);
                        layer.msg(res.msg);
                        table.reload('dataTable')
					}else{
                        layer.msg(res.msg)

					}
                }).always(function(){

                })

            }

        });

		//工具栏事件
		table.on('toolbar(dataTable)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			let data = checkStatus.data;
			switch(obj.event){
				case 'getCheckData':
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					layer.msg('选中了：'+ data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选': '未全选')
					break;
				case 'add':
					parent.layer.open({
						type: 2
						,offset:'auto'
						,title:'添加分类'
						,content:'/category/editPage'
						,area:['900px','700px']
						,btn:'关闭全部'
						,btnAlign:'c'
						,yes:function () {
							parent.layer.closeAll();
						}
					});
					break;
				case 'refresh' :
				    window.location.reload();
					break
				default:
				    break
			};
		});

		//触发行双击事件
		// table.on('rowDouble(dataTable)', function(obj){
		// 	let id = obj.data.id;
		// 	openDetail(id);
		// });

		//工具条事件
		table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			let id = obj.data.id; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'del'){ //删除
				layer.confirm('真的删除行么', function(index){
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令

					$.get("/?????????????????",{id:id},function (respData) {
						if (respData.success == 1){
							layer.msg("删除成功");
						}else {
							layer.msg("删除失败"+respData.message);
						}
					});
				});
			} else if(layEvent === 'edit'){ //编辑
				parent.layer.open({
					type: 2
					,offset:'auto'
					,title:'修改分类'
					,content:'/category/editPage?id=' + id
					,area: ['80%','90%']
					,btn:'关闭全部'
					,btnAlign:'c'
				});
			} else if(layEvent === 'detail') {
				openDetail(id);
			}else if(layEvent == 'toggleShow' ){
                $.ajax({
                    type:"POST",
                    url:'/category/toggleShow',
                    // dataType:'',
                    data:{id:id},
                }).done(function(res){
                    if(res.code==0){
                        layer.msg('显示切换成功');
                        table.reload('dataTable', {
                            // where: {},
							// page: {curr:1}
                        });
                    }else{
                        layer.msg(res.msg)
                    }
                }).always(function(){

                })
			}
		});

	});

	function doSearch() {
		//通过jquery获取参数的值
		let title = $("#title").val();
		table.reload('dataTable', {
			where: {
				title: title,
			},page: {
				curr:1
			}
		});

	}

	//打开详情
    const openDetail = (id) => {
        parent.layer.open({
            type:2
            ,offset:'auto'
            ,title:'分类详情'
            ,content:'/category/detailPage?id='+id
            ,area:['1000px','500px']
            ,btn:'关闭全部'
            ,btnAlign:'c'
            ,yes:function () {
                parent.layer.closeAll();
            }
        });
    }




</script>

</body>
</html>